<template>
  <div class="cart-item" @click="changgecheck">

    <check-button :ischeck="cartitem.ischecked" ></check-button>
    <div class="img"><img :src="cartitem.img"></div>
    <div class="info">
      <div class="title">{{cartitem.title}}</div>
      <div class="intro">{{cartitem.intro}}</div>
      <div class="info-bottom">
        <div class="price left">￥{{cartitem.price}}</div>
        <div class="price right">x{{cartitem.count}}</div>
      </div>

    </div>
  </div>

</template>

<script>

  import CheckButton from "../../../../components/content/checkbutton/CheckButton";
  export default {
    name: "CartListItem",
    components: {CheckButton},
    data(){
        return{}
    },

    props:{
      cartitem:{
        type:Object,
        default(){
          return {}
        }
      }
    },
    methods:{
      changgecheck(){
        this.cartitem.ischecked = !this.cartitem.ischecked

      }
    },
  }
</script>

<style scoped>
  .cart-item{
    width:100%;
    display: flex;
    padding: 5px;
    border-bottom: 1px solid #ccc;
  }

  .title, .intro{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }


  .img{
    padding: 5px;
  }

  .img img{
    width: 80px;
    height:100px;
    display: block;
    border-radius: 5px;

  }

  .info{
    font-size: 16px;
    color:#333333;
    padding: 5px 10px;
    position: relative;
    overflow: hidden;
  }

  .intro{
    font-size: 14px;
    color:#666666;
    margin-top: 15px;
  }

  .info-bottom {
    margin-top: 10px;
    position: absolute;
    bottom:10px;
    left:10px;
    right:10px;
    color: orange;
  }



</style>
